

@import "common.less";



@c-red:#e16464;
.m-w{//限制最大宽度
  max-width: @max-width;
  overflow-x:hidden ;
}
.fix() {/*用于清除浮动，内容为\200B指零宽度空格，即可省略visible:hidden*/
  *zoom:1;
  &:after{
    content:"\200B"; display:block; height:0; clear:both;
  }
}


.fullscreen-yscroll{
  .m-w;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling:touch;
  margin: 0 auto;
}



body{
  background: #e8e8ed;

}
input{
  font-size: 14px;}



//图标
.icon{
  .bg-img('icons_01.png');
  .bg-s(31px);
}

.icon-radio{
  .icon;
  width: 21px;
  height:21px;
  .bg-p-s(0,-75px);
  display: inline-block;
  vertical-align: middle;
}
.icon-radio.selected{
  .bg-p-s(0,-111px);
}
.icon-del{
  .icon;
  width: 16px;
  height:19px;
  .bg-p-s(0,0);
  display: inline-block;
  vertical-align: middle;
}
.icon-edit{
  .icon;
  width: 16px;
  height:20px;
  .bg-p-s(0,-38px);
  display: inline-block;
  vertical-align: middle;
}
.icon-add{
  .icon;
  width: 25px;
  height:25px;
  .bg-p-s(0,-289px);
  display: inline-block;
  vertical-align: middle;
}
.icon-arrow{
  .icon;
  width: 10px;
  height:17px;
  .bg-p-s(0,-151px);
  display: inline-block;
  vertical-align: middle;
}
.icon-wx{
  .icon;
  width: 30px;
  height:30px;
  .bg-p-s(0,-235px);
  display: inline-block;
  vertical-align: middle;
}

.icon-zfb{
  .icon;
  width: 30px;
  height:30px;
  .bg-p-s(0,-189px);
  display: inline-block;
  vertical-align: middle;
}
//选择地址
.addr-list{

  li{
    padding-top: 18px;

    margin-bottom: 10px;
    background: #fff;;


    .nameandtel{
      .pad-lr(15);
      color: @c-tit;
      font-size: 16px;
      .b;
      .name{
        margin-right: 35px;
      }

    }

    .detail{
      .pad-lr(15);
      margin-top: 10px;
      color: @c-des;
      .lh(16);
      .fz(12);
      .pad-b(15);
      .bdb(@c-bdb);
    }

    .operate{
      .h(42px);
      .bdb(@c-bdb);
      .p-r;
      .fix();
      .pad-lr(15);
      .default{
        //.p-a(15px,12px);
        float: left;
        margin-top: 12px;
      }
      .choose{
        //.p-a-rt(15px,9px);
        float:right;
        margin-top: 9px;
        margin-left: 20px;
      }
      .del{
        //.p-a-rt(100px,14px)
        float:right;
        margin-top: 14px;
        margin-left: 20px;
      }
      .edit{
        //.p-a-rt(170px,14px)
        float:right;
        margin-top: 14px;
      }
    }
  }
}




.addaddr{//很多地方用到
  background: #e8e8ed;
  .p-f-lb(0,0);
  width: 100%;
  padding-bottom: 25px;
  padding-top: 25px;
}

//添加地址
.newaddr{
  .tip{
    background: #fce7ad;
    color: #896337;
    font-size: 12px;
    text-align: center;
    .h--l(28);
  }
  .detail{
    color: @c-grey1;
    background: #fff;
    .bdb(@c-bdb);
    .item{
      background: #fff;
      .h--l(45);
      .bdb(@c-bdb);
      margin-left: 15px;
      .choosetip{
        float: right;
        line-height: 14px;
        margin: 16px 15px 0 0;
      }
      .tit{
        width: 70px;
        display: inline-block;
        text-align: right;
        //.t-a-j;
      }
    }
    .item:last-child{
      border: none;
    }
    input{
      border: none;
      background: none;
    }
    margin-bottom: 5px;

  }
  .default{
    background: #fff;
    padding: 0 15px;
    .h--l(45);
    .bdb(@c-bdb);
    .icon-switch{
      float: right;margin: 7px 0 0 0;
    }
  }


  .tc{
    margin-top: 33px;
    input{
      border-right: none;
      border-left: none;
      border-top: none;
      background: #46a6f7;
      border-bottom: #448ed1 solid 1px;
      color: #fff;
    }
  }
}


//选择地址
.choosepca{
  background: rgba(0, 0, 0, .3);

  display: none;
  .screen{
    .transform(translate(100%,0));
  }

  .screen {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 400px;
    height: 100%;
    background-color: #f7f7f7;
    z-index: 9999;
    border-left: 1px solid #ececec;
  }

  .screen .current-area {
    position: absolute;
    left: 0;
    top: 51px;
    height: 40px;
    line-height: 40px;
    width: 100%;
    padding-left: .8em;
    background: #f7f7f7;
    border-bottom: 1px solid #ececec;

    z-index: 9999;
  }

  .screen .screen-header,.screen .tab-menu a {
    border-bottom: 1px solid #ececec;
    text-align: center
  }
  .screen .screen-header {
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 400px;
    padding: 10px 0;
    text-align: center;
    line-height: 30px;
    font-size: 1.2857em;
    background-color: #fff;
    z-index: 1000;
  }
  .screen .screen-header .back {
    position: absolute;
    display: block;
    left: 15px;
    top: .8em;
    .icon;
    width: 25px;
    height:25px;
    .bg-p-s(0,-319px);

  }
  .screen .screen-cont .lists dd:first-child,.screen .tab-menu a {
    border-top: 1px solid #ececec
  }
  .screen .screen-cont {
    height: 100%;
    padding: 99px 0 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .screen .screen-cont .lists dd {
    position: relative;
    padding: 1em 34px 1em 14px;
    font-size: 1.1429em;
    border-bottom: 1px solid #ececec;
  }
  .screen.show{
    .transform(translate(0,0));
    .transition2(transform 1s);
  }

}


.choosepca.show{
  display: block;
}
//结算页面
.sum{
//收货地址
  .link{
    background: #fff;
    padding: 17px 30px 17px 15px;
    .bdb(@c-bdb);
    .p-r;
    margin-bottom: 7px;

    .nametel{

      color: @c-tit;
      font-size: 16px;
      .b;
      .name{
        margin-right: 35px;
      }
    }

    .addr{
      margin-top: 10px;
      padding-left: 65px;
      font-size: 12px;
      color: @c-tit;
      .p-r;
      .isdefault{
        color: @c-redder;
        .p-a(0,0);
      }

    }

    .icon-arrow{
      .p-a-rt(15px,50%);
      margin-top: -7px;
    }
  }
//商品列表
  .goods{
    margin-bottom: 7px;
    .bdt(@c-bdb);

    li{
      .bdb(@c-bdb);
      background: #fff;
      padding: 0 60px 0 100px;
      height: 90px;
      .p-r;

      img{
        .p-a(15px,8px);
        .bd(@c-bdb)
      }

      .name{
        color: @c-tit;
        .ell;
        padding-top: 10px;
      }

      .specifications{
        color: @c-grey2;
        font-size: 12px;
        margin-top: 4px;
        line-height: 15px;
        height: 30px;
        .ell-line(2);
      }

      .price{
        color: @c-des;
        margin-top: 1px;
        margin-bottom: 3px;
      }

      .number{
        .p-a-rt(15px,15px);
        font-size: 12px;
      }
    }
  }
//优惠
  .discount{
    margin-bottom: 7px;
    .bdb(@c-bdb);
    .item{
      background: #fff;
      .bdb(@c-bdb);
      .h--l(52);
      .pad-lr(15);

      .tit{
        color: @c-tit;
        display: inline-block;
        width: 87px;vertical-align: middle;
      }

      .des{
        color:@c-grey2;
        font-size: 12px;
      }

      .icon-switch{float: right;
        margin-top: 11px;
      }

      .choose{
        float: right;
        color: @c-grey2;

      }
      
      .todet{
        float: right;
        color: @c-tit;
      }
      .icon-arrow{
        margin-left: 5px;
      }

      .icon-arrow.rotate{
        .rotate(90deg);
        .transition2(transform 1s);
      }

    }
    .item.msg{
      .p-r;
      padding-left: 103px;
      .tit{.p-a(15px,0)};
      input{width: 100%;
        border-radius: 3px;
        font-size: 14px;
        border:none;
        background: none;
        color: @c-grey2;}
    }

    .item:last-child{border: none;}
  }


  //优惠详情
  .discountdetail{
    width: 100%;
    li{
      margin-left: 20%;
      max-width: 400px;
      .bdb(@c-bdb);
      font-size: 12px;
      padding: 5px 2px;
      span{
        display: inline-block;
        width: 32%;
        color: @c-redder;
      }
      .price{text-align: center;}
      .price:last-child{text-align: right;}
      .name{
        color: @c-grey;
      }
    }
  }
}

.sum-topay{
  .p-f-lb(50%,0);
  .tl;
  .transform(translateX(50%));
  border-top: @c-bdb solid 1px;
  height: 50px;
  width: 100%;
  .m-w;
  background: #fff;
  font-size: 16px;
  .h--l(50);
  .count{
    width: 62%;


    color: @c-redder;
    p{
      padding-left: 15px;
    }
    float: left;
  }

  .p-btn{
    display: block;
    width: 38%;
    float: left;
    background: @bg-yellow;
    color: @c-black;
    .tc;
  }
}


//优惠券页面
.coupon-add{
  .m-w;
  .bdb(@c-bdb);
  .h--l(52);
  padding-right: 114px;
  padding-left: 15px;
  background: #fff;
  .p-r;
  margin-bottom: 7px;
  .key{
    width: 97%;
    height: 35px;
    background: #fff;
    .bd(@c-bdb);
    box-shadow: none;
    border-radius: 3px;
    padding-left: 5px;
  }

  .sbtn{
    display: block;
    width: 85px;
   .h--l(36);
    background: #dcdcdc;
    border-radius: 3px;
    .tc;
    color: #fff;
    font-size: 16px;
    .p-a-rt(15px,9px);
    border: none;
  }
}

.coupon-tab{
  margin-bottom: 11px;
  .m-w;
  height: 45px;
  line-height: 45px;
  font-size: 13px;
  background: #fff;
  .bdb(@c-bdb);
  color: @c-grey2;
  .tc;
  .p-r;
  >div{
    width: 50%;
    float: left;
  }
  .active{
    color: @c-red;
  }
  .line{
    height: 30px;
    width: 1px;
    border-right: @c-bdb solid 1px;
    .p-a(50%,7px);
  }
}

.coupon-list{
  li{
    margin-bottom: 11px;
    margin-left: 9px;
    margin-right: 9px;
    background:#fff url('@{baseurl}js_yhq_03.gif') left top repeat-x;
    background-size:6px;
    box-shadow: @c-bdb 0 2px 2px;
    .p-r;
    .con{
      color: @c-tit;
      padding: 33px 10px 18px 10px;
      .fix();
      .box{
        float: left;
      }
      .box1{
        width: 9%;
        height: 1px;
        .icon-radio{
          .p-a(10px,50%);
          margin-top: -10px;
        }
      }
      .box2{
        width: 38%;
      }
      .box3{
        width: 50%;
        float: right;
      }

      .price{
        .b;
        span{
          font-size: 40px;
          position: relative;
          top: 5px;
        }
      }
      .tip{
         color: @c-grey2;
        margin-top: 13px;
        line-height: 16px;
        font-size: 12px;
       }
      .name{
        margin-top: 14px;
        font-size: 16px;
        line-height: 20px;
        height: 40px;
        margin-bottom: 6px;
        .ell-line(2)
      }
      .time{
        color: @c-grey2;
        font-size: 12px;
        line-height: 16px;
      }
    }
  }
}

.pay-m-header{
  height: 160px;
  background: #39393d;
  padding-left: 20px;
  .dec{
    padding-top: 24px;
    margin-bottom: 24px;
    font-size: 16px;
    color: #818189;
  }
  .price{
    color: @bg-yellow;
    font-size: 70px;
    .b;
  }
}
.pay-m{
  .method{
    height: 65px;
    background: #fff;
    padding-left: 60px;
    .bdb(@c-bdb);
    .p-r;
    .icon-wx,.icon-zfb{
      .p-a(11px,17px)
    }
    .name{
      padding: 13px 0 8px;
      font-size: 16px;
      color: @c-tit;
    }
    .tip{
      color: @c-grey2;
      font-size: 12px;
    }
    .icon-radio{
      .p-a-rt(15px,23px)
    }

  }
}